<template>
    <view class="home-container">
      <!-- 返回按钮和标题 -->
      <view class="header">
        <view class="back-btn" @click="handleBack">
          <text class="back-icon">〈</text>
        </view>
        <view class="page-title">精致成品杆</view>
        <view class="empty-placeholer"></view>
      </view>
  
      <!-- 成品杆列表区域 -->
      <view class="content-container">
        <view class="finished-cues-section">
          <view class="cues-grid">
            <!-- 球杆项 - 点击进入详情页 -->
            <view class="cue-item" 
                  v-for="(cue) in finishedCues" 
                  :key="cue.id" 
                  @click="handleCueClick(cue.id)">
              
              <view class="image-wrapper">
                <image :src="cue.imageUrl" 
                       class="cue-image" 
                       mode="widthFix"
                       lazy-load  
                       @error="onImageError(cue)">  <!-- 图片加载失败处理 -->
                </image>
              </view>
              
              <!-- 名称在图片下方居中 -->
              <text class="cue-name">{{ cue.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        finishedCues: [
          { id: 1, name: 'ZeroOne S1', imageUrl: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg' },
          { id: 2, name: 'ZeroOne S2', imageUrl: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg' },
          { id: 3, name: 'ZeroOne S1', imageUrl: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg' },
          { id: 4, name: 'ZeroOne SSR', imageUrl: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg' },
          { id: 5, name: 'ZeroOne SSR', imageUrl: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg' },
          { id: 6, name: 'ZeroOne SSR', imageUrl: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg' },
        ]
      };
    },
  
    methods: {
      // 返回上一页
      handleBack() {
        uni.navigateBack();
      },
      
      // 点击球杆进入详情页
      handleCueClick(id) {
        uni.navigateTo({ url: `/pages/index/cueDetail?id=${id}` });
      },
      
      // 图片加载失败时显示默认图
      onImageError(cue) {
        cue.imageUrl = 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/default-cue.png'; // 替换为你的默认图片地址
      }
    },
    
    onLoad() {
      console.log('成品杆列表页面加载完成');
    }
  }
  </script>
  
  <style>
  .home-container {
    position: relative;
    min-height: 100vh;
    background-color: #000; /* 黑色背景 */
    padding-top: 180rpx;
    padding-bottom: 60rpx;
    box-sizing: border-box;
  }
  
  .header {
    position: fixed;
    top: 60rpx;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #000; /* 黑色导航栏 */
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
  }
  
  .back-btn {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff; /* 白色返回按钮 */
    font-size: 40rpx;
  }
  
  .page-title {
    flex: 1;
    text-align: center;
    color: #fff; /* 白色标题 */
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .empty-placeholer {
    width: 80rpx;
  }
  
  .content-container {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
  }
  
  .finished-cues-section {
    display: flex;
    flex-direction: column;
    gap: 40rpx;
  }
  
  .cues-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
  }
  
  /* 球杆项样式优化 */
  .cue-item {
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.1); /* 白色阴影 */
    transition: all 0.3s ease;
    background-color: #1a1a1a; /* 卡片背景色 */
  }
  
  .cue-item:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(255, 255, 255, 0.15); /* 白色阴影 */
  }
  
  .image-wrapper {
    width: 100%;
    height: 380rpx;
    overflow: hidden;
  }
  
  .cue-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .cue-image:hover {
    transform: scale(1.05);
  }
  
  /* 名称在图片下方居中（白色字体） */
  .cue-name {
    display: block;
    width: 100%;
    color: #fff; /* 白色文字 */
    font-size: 30rpx;
    text-align: center;
    padding: 20rpx 10rpx;
    font-weight: 500;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>